<!DOCTYPE html>
<html>

<head>
    <title>Users</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div id="leftField" class="col-3">
                <h1>
                    Add User
                </h1>
                <form name="addUser" method="post" action="/users/adduser">
                    <input type="text" placeholder="username" name="username" /><br/>
                    <p>userInfo:</p>
                    <input type="text" placeholder="age" name="age" /><br/>
                    <input type="text" placeholder="sex" name="sex" /><br/>
                    <p>userHobby</p>
                    <input type="text" placeholder="hobby1" name="hobby1" /><br/>
                    <input type="text" placeholder="hobby2" name="hobby2" /><br/>
                    <input type="text" placeholder="hobby3" name="hobby3" /><br/>
                    <input type="submit" value="submit" />
                </form>
            </div>
            <div class="col-3" style="position:relative;">
                    <h1>
                        Find User
                    </h1>
                    <form name="findUser" method="post" action="/users/finduser">
                        <input type="text" placeholder="id" name="find_id" /><br/>
                        <input type="text" placeholder="username" name="findUserName" /><br/>
                        <input type="submit" value="submit" />
                    </form>
                </div>
            <div class="col-3" style="position:relative;">
                <h1>
                    Update User
                </h1>
                <form name="updateUser" method="post" action="/users/updateuser">
                    <input type="text" placeholder="id" name="update_id" /><br/>
                    <input type="text" placeholder="username" name="updateUserName" /><br/>
                    <p>userInfo:</p>
                    <input type="text" placeholder="age" name="updateAge" /><br/>
                    <input type="text" placeholder="sex" name="updateSex" /><br/>
                    <p>userHobby</p>
                    <input type="text" placeholder="hobby1" name="updateHobby1" /><br/>
                    <input type="text" placeholder="hobby2" name="updateHobby2" /><br/>
                    <input type="text" placeholder="hobby3" name="updateHobby3" /><br/>
                    <input type="submit" value="submit" />
                </form>
            </div>
            <div class="col-3" style="position:relative;">
                <h1>
                    Delete User
                </h1>
                <form name="deleteUser" method="post" action="/users/deleteuser">
                    <!-- <input type="text" placeholder="id" name="_id" /><br/> -->
                    <input type="text" placeholder="username" name="deleteUserName" /><br/>
                    <input type="submit" value="submit" />
                </form>
            </div>
        </div>
    </div>

</body>

</html>